<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-content">
        <h2>Welcome</h2>
        <p class="subtitle">登录您的商城账号</p>
        <div class="input-group">
          <div class="input-wrapper">
            <i class="el-icon-user"></i>
            <input
                type="text"
                v-model="loginForm.userName"
                placeholder="请输入用户名"
                @keyup.enter="handleLogin"
            >
          </div>
        </div>
        <div class="input-group">
          <div class="input-wrapper">
            <i class="el-icon-lock"></i>
            <input
                type="password"
                v-model="loginForm.password"
                placeholder="请输入密码"
                @keyup.enter="handleLogin"
            >
          </div>
        </div>
<!--        <div class="remember-me">-->
<!--          <label class="checkbox-wrapper">-->
<!--            <input type="checkbox" v-model="loginForm.remember">-->
<!--            <span class="checkmark"></span>-->
<!--            记住我-->
<!--          </label>-->
<!--        </div>-->
        <button
            class="login-button"
            @click="handleLogin"
            :disabled="loading"
        >
          <span class="button-text">{{ loading ? '登录中...' : '登录' }}</span>
        </button>
<!--        <div class="additional-links">-->
<!--          <a href="#" @click.prevent="forgotPassword">忘记密码？</a>-->
<!--          <a href="#" @click.prevent="goToRegister">注册账号</a>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import  axios from 'axios';
import {ElMessage} from 'element-plus'
import axiosUtil from '@/util/axios'
import router from "@/router";

const loginForm = ref({
     userName: "",
     password: ""
    }
)
const loading = ref(false);

const handleLogin = async () => {
  if (!loginForm.value.userName || !loginForm.value.password) {
    ElMessage.error('请输入用户名和密码')
    return
  }
  loading.value = true
  try {
    let result=await axiosUtil.post("adminLogin",loginForm.value);
    let data=result.data;
    if(data.code==0){
      // ElMessage.success("登录成功");
      window.sessionStorage.setItem("token",data.token);
      window.sessionStorage.setItem("userInfo",JSON.stringify(loginForm.value))
      router.replace("/")
    }else{
      ElMessage.error(data.msg);
    }
  }catch(err){
    console.log("error:"+err);
    ElMessage.error("服务器出错，请联系管理员！");
  }finally {
    loading.value = false
  }
}





</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  url('https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-box {
  max-height: 90vh;
  width: 420px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  /* 隐藏滚动条但保持功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.login-box::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.login-content {
  padding: 15px;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 1px;
}

.subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
}

.input-group {
  margin-bottom: 24px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper i {
  position: absolute;
  left: 12px;
  color: #909399;
  font-size: 18px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 14px 16px 14px 40px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.9);
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.remember-me {
  margin-bottom: 24px;
  color: #606266;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #dcdfe6;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
  transition: all 0.3s;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkmark {
  background-color: #409eff;
  border-color: #409eff;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkmark:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.login-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #409eff 0%, #36acfe 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.login-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.login-button:active {
  transform: translateY(0);
}

.login-button:disabled {
  background: linear-gradient(135deg, #a0cfff 0%, #8cc5fe 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.button-text {
  position: relative;
  z-index: 1;
}

.additional-links {
  margin-top: 24px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.additional-links a {
  color: #409eff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
}

.additional-links a:hover {
  color: #66b1ff;
  text-decoration: underline;
}

@media (max-height: 700px) {
  .login-box {
    padding: 20px;
  }

  .login-content {
    padding: 10px;
  }

  .input-group {
    margin-bottom: 16px;
  }

  h2 {
    font-size: 24px;
    margin-bottom: 5px;
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 20px;
  }

  input[type="text"],
  input[type="password"] {
    padding: 12px 16px 12px 36px;
  }

  .remember-me {
    margin-bottom: 16px;
  }

  .login-button {
    padding: 12px;
  }

  .additional-links {
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .login-box {
    width: 85%;
    max-height: 85vh;
    padding: 20px;
  }

  .login-content {
    padding: 15px;
  }

  h2 {
    font-size: 28px;
  }

  .subtitle {
    font-size: 14px;
  }
}
</style>
